<template>
  <div id="system-member">
    <el-container style="overflow-x:hidden;overflow-y:hidden; height:100%;">
      <el-scrollbar
        style="width:100%;height:100%;white-space: nowrap;"
        @mousewheel.native="wheel"
        ref="roleRoll"
        class="roleRoll"
      >
        <el-header>
          <!-- 查询开始 -->
          <el-form
            :inline="true"
            :model="formInline"
            class="demo-form-inline"
            style="margin-top:20px"
          >
            <el-form-item>
              <el-select
                v-model="formInline.status"
                placeholder="请选择用户状态"
              >
                <el-option
                  v-for="item in optionsStatus"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                >
                </el-option>
              </el-select>
            </el-form-item>
            <el-form-item>
              <el-select v-model="formInline.level" placeholder="请选择会员">
                <el-option
                  v-for="item in optionsLevel"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                >
                </el-option>
              </el-select>
            </el-form-item>
            <el-form-item>
              <el-select v-model="formInline.gender" placeholder="请选择性别">
                <el-option
                  v-for="item in optionsGender"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                >
                </el-option>
              </el-select>
            </el-form-item>
            <el-form-item>
              <el-input
                v-model="formInline.id"
                placeholder="输入用户ID"
              ></el-input>
            </el-form-item>
            <el-form-item>
              <el-input
                v-model="formInline.nickname"
                placeholder="输入昵称"
              ></el-input>
            </el-form-item>
            <el-form-item>
              <el-button
                type="primary"
                @click="onSubmit()"
                icon="el-icon-search"
                clearable
                v-permission="'system:user:query'"
                >查询</el-button
              >
            </el-form-item>
          </el-form>
          <!-- 查询结束 -->
        </el-header>

        <el-main>
          <el-table
            :data="usertableData"
            style="width: 100%;"
            :default-sort="{ prop: 'date', order: 'descending' }"
            align="center border show-summary"
            border
          >
            <!-- 列表数据 -->
            <el-table-column prop="id" label="用户ID" sortable>
            </el-table-column>
            <el-table-column prop="nickname" label="昵称"> </el-table-column>
            <el-table-column prop="phone" label="手机号码"> </el-table-column>
            <el-table-column label="性别">
              <template slot-scope="scope">
                <el-tag>
                  {{scope.row.gender|gender}}
                </el-tag>
              </template>
            </el-table-column>
            <el-table-column label="会员等级">
              <template slot-scope="scope">
                <el-tag>
                      {{ scope.row.level|level}}
                </el-tag>
              </template>
            </el-table-column>
            <el-table-column prop="desc" label="生日"> </el-table-column>
            <el-table-column label="状态">
              <template slot-scope="scope">
                <el-tag> 
                  {{ scope.row.status|status}}
                </el-tag>
              </template>
            </el-table-column>
            <el-table-column prop="gmtLastLogin" label="上次登录时间">
              <template slot-scope="scope">{{scope.row.gmtLastLogin|formatDate}}</template>
            </el-table-column>
            <el-table-column prop="lastLoginIp" label="上次登录IP">
               
            </el-table-column>
            <el-table-column label="操作" width="270">
              <template slot-scope="scope">
                <el-button
                  size="mini"
                  type="primary"
                  @click="statusStatus(scope.$index, scope.row)"
                  v-permission="'system:user:upadte'"
                  >{{ scope.row.status == 1 ? "冻结" : "激活" }}</el-button
                >
                <el-button
                  size="mini"
                  type="primary"
                  @click="handleEdit(scope.$index, scope.row)"
                  v-permission="'system:user:upadte'"
                  >编辑</el-button
                >
                <el-button
                  size="mini"
                  type="danger"
                  @click="handleDelete(scope.$index, scope.row)"
                  v-permission="'system:user:delete'"
                  >删除</el-button
                >
              </template>
            </el-table-column>
          </el-table>
        </el-main>
        <el-footer>
          <!-- 底部页数 -->
          <paging :paging="paging" :onSubmit="onSubmit"></paging>
        </el-footer>
      </el-scrollbar>
      <!-- 滚动组件结束 -->
    </el-container>
    <!-- 主要内容结束 -->

    <el-dialog
      :title="title"
      :visible.sync="dialogFormVisible"
      center
      class="memberdialog"
    >
      <!-- 对话框表单 -->
      <el-form
        :model="ruleForm"
        status-icon
        :rules="rules"
        ref="ruleForm"
        label-width="100px"
        class="demo-ruleForm"
        style="width:85%"
      >
        <el-form-item label="用户昵称" prop="nickname">
          <el-input v-model.trim="ruleForm.nickname"></el-input>
        </el-form-item>
        <el-form-item label="用户手机号" prop="phone">
          <el-input v-model="ruleForm.phone"></el-input>
        </el-form-item>
        <el-form-item label="用户密码" prop="password">
          <el-input v-model="ruleForm.password" show-password></el-input>
        </el-form-item>
        <el-form-item label="用户性别" prop="gender">
          <el-select v-model="ruleForm.gender" placeholder="请选择性别">
            <el-option
              v-for="item in optionsGender"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            >
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="用户等级" prop="level">
          <el-select v-model="ruleForm.level" placeholder="请选择会员">
            <el-option
              v-for="item in optionsLevel"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            >
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="用户状态" prop="status">
          <el-select v-model="ruleForm.status" placeholder="请选择用户状态">
            <el-option
              v-for="item in optionsStatus"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            >
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item style="text-align: center;">
          <el-button type="primary" @click="submitForm('ruleForm')"
            >确定</el-button
          >
          <el-button @click="dialogFormVisible = false">取消</el-button>
        </el-form-item>
      </el-form>
    </el-dialog>
  </div>
</template>

<script>
import user from "@/api/user";
import Paging from "../../components/Paging";
export default {
  components: {
    Paging,
  },
  data() {
    var validateRole = (rule, value, callback) => {
      if (value === "" || value === undefined) {
        //注意这里的值数据库没有数据所以这里的空值是undefined，所以两个条件一起写
        callback(new Error("用户不能为空"));
      } else {
        callback();
      }
    };
    var validatePass = (rule, value, callback) => {
      if (value === "") {
        callback(new Error("密码不能为空"));
      } else {
        callback();
      }
    };
    var cellphoneNumber = (rule, value, callback) => {
      if (value === "") {
        callback(new Error("手机号码不能为空"));
      } else {
        let password = /^[1][3,4,5,6,7,8,9][0-9]{9}$/;
        if (password.test(value)) {
          callback();
        } else {
          callback(new Error("请输入正确的手机号码"));
        }
      }
    };
    var validateGender = (rule, value, callback) => {
      if (value === "") {
        callback(new Error("性别不能为空"));
      } else {
        callback();
      }
    };
    var validateLevel = (rule, value, callback) => {
      if (value === "") {
        callback(new Error("等级不能为空"));
      } else {
        callback();
      }
    };
    var validateStatus = (rule, value, callback) => {
      if (value === "") {
        callback(new Error("状态不能为空"));
      } else {
        callback();
      }
    };
    return {
      optionsStatus: [
        //选项框状态
        {
          value: 0,
          label: "冻结",
        },
        {
          value: 1,
          label: "激活",
        },
        {
          value: "",
          label: "全部",
        },
      ],
      optionsLevel: [
        //选项框等级
        {
          value: 0,
          label: "普通会员",
        },
        {
          value: 1,
          label: "vip会员",
        },
        {
          value: "",
          label: "全部",
        },
      ],
      optionsGender: [
        //选项框性别
        {
          value: 1,
          label: "女",
        },
        {
          value: 2,
          label: "男",
        },
        {
          value: "",
          label: "全部",
        },
      ],
      formInline: {
        //查询数据
        nickname: "", //用户昵称查询
        id: "", //用户ID
        level: null, //用户等级
        gender: null, //用户性别
        status: null, //用户状态
      },
      ruleForm: {
        //表单数据
        nickname: "", //用户昵称
        password: "", //用户密码
        phone: "", //手机号码
        level: "", //用户等级
        gender: "", //用户性别
        status: "", //用户状态
      },
      index: "", //选中的下标
      // modificationadta: "", //选中的数据修改
      rules: {
        //表单验证
        nickname: [
          { required: true, validator: validateRole, trigger: "blur" },
        ],
        password: [
          { required: true, validator: validatePass, trigger: "blur" },
        ],
        phone: [
          { required: true, validator: cellphoneNumber, trigger: "blur" },
        ],
        gender: [
          { required: true, validator: validateGender, trigger: "blur" },
        ],
        level: [{ required: true, validator: validateLevel, trigger: "blur" }],
        status: [
          { required: true, validator: validateStatus, trigger: "blur" },
        ],
      },
      title: "编辑", //对话框的名字
      dialogFormVisible: false, //对话框表单的隐藏显示
      usertableData: [], //后台全部会员列表数据
      paging: {
        currentPage: 1, //出现的页数
        pagesize: 10, //    每页的数据
        total: 0, //总页数
      },
    };
  },
  created: function() {
    //一开始的渲染数据
    this.onSubmit();
  },
  filters: {
    formatDate: function(value) {//转换时间戳
      let date = new Date(value);
      let MM = date.getMonth() + 1;//getMonth()中0表示1月，因此要加1
      MM = MM < 10 ? "0" + MM : MM;
      let d = date.getDate();
      d = d < 10 ? "0" + d : d;
      let h = date.getHours();
      h = h < 10 ? "0" + h : h;
      let m = date.getMinutes();
      m = m < 10 ? "0" + m : m;
      return MM + "月" + d + "日" + h + "时" + m + "分";
    },
    gender:function(value){//转换性别
      switch(value)
      {
        case 2:
          value="男"
        break;
        case 1 :
          value="女"
        break;
        default :
          value="未知性别"
        break;
      }
      return value
    },
    level:function(value){//转换会员
      switch(value)
      {
        case 1 :
          value="vip会员"
        break;
        default :
          value="普通会员"
        break;
      }
      return value
    },
    status:function(value){//转换状态
      switch(value)
      {
        case 1 :
          value="激活"
        break;
        default :
          value="冻结"
        break;
      }
      return value
    }
  },
  methods: {
    onSubmit() {
      //查询
      let that = this;
      if (that.formInline.nickname!=""||that.formInline.id!="") {//具体查询回到第一页，不然查询的数据在第一页，显示的页数和查询是页数不对
        that.paging.currentPage=1
      }
      let data = Object.assign({pageNo: that.paging.currentPage,limit: that.paging.pagesize,}, that.formInline);
      user.memberquery(data)
        .then((res) => {
          that.usertableData = res.data.data.items; //获取数据赋值
          that.paging.total = res.data.data.total; //总页数
        });
    },
    statusStatus(index, row) {//冻结激活
      let that = this;
      let status = row.status;
      if (status == 1) {
        //判断状态
        status = 0;
      } else {
        status = 1;
      }
      user
        .updateStatus({
          userId: row.id,
          status: status,
        })
        .then(function(res) {
          if (res.data.errmsg == "成功") {
            that.$notify({
              title: "成功",
              message: "状态改变成功",
              type: "success",
            });
             that.usertableData[index].status = status;
          } else {
            that.$notify.error({
              title: res.data.errmsg,
              message: "状态改变失败",
            });
          }
        });
    },
    handleEdit(index, row) {
      //编辑
      let that = this;
      this.dialogFormVisible = true;
      this.resetForm("ruleForm");
        //防止重置时没有数据
        setTimeout(function() {
        that.index = index;
        for (const i in that.ruleForm) {
            that.ruleForm[i] = row[i];
        }
        }, 100);
    },
    submitForm(formName) {
      //提交
      let that = this;
      this.$refs[formName].validate((valid) => {
        if (valid) {
          this.dialogFormVisible = false;
          that.compile();
        } else {
          return false;
        }
      });
    },
    compile() {
      //编制
      let that = this;
      let data = Object.assign(that.ruleForm,{birthday: "2000-11-26"})
      user
        .updateUser({
          //编制封装接口
          user: JSON.stringify(data),
        })
        .then(function(res) {
          console.log(res);
          if (res.data.errmsg == "成功") {
            that.$notify({
              title: "成功",
              message: "改变成功",
              type: "success",
            }); 
            that.usertableData[that.index] = Object.assign(that.usertableData[that.index],that.ruleForm)
          } else {
            that.$notify.error({
              title: res.data.errmsg,
              message: "改变失败",
            });
          }
        });
    },
    resetForm(formName) {
      //重置验证
      let that = this;
      setTimeout(function() {
        that.$refs[formName].resetFields();
      }, 100);
    },
    handleDelete(index, row) {
      //删除
      let that = this;
      this.$confirm("此操作将永久删除--"+row.nickname+"--, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          user
            .deleteUser({
              //删除封装接口
              id: row.id,
              nickname: row.nickname,
            })
            .then(function(res) {
              if (res.data.errmsg == "成功") {
                that.$message({
                  type: "success",
                  message: res.data.errmsg,
                });
                that.paging.total = that.paging.total - 1; //总共条数-1条
               that.usertableData.splice(index, 1);
              } else {
                that.$message({
                  showClose: true,
                  message: res.data.errmsg,
                  type: "error",
                });
              }
            });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除",
          });
        });
    },
    wheel(e) {
      //滚动事件
      e = e || window.event;
      if (e.wheelDelta) {
        if (e.wheelDelta < 0) {
          //控制滚动的方向
          //向下
          this.$refs.roleRoll.wrap.scrollTop += 20;
        } else {
          this.$refs.roleRoll.wrap.scrollTop -= 20;
        }
      }
    },
  },
};
</script>

<style lang="less" scoped>
#system-member {
  //内容填满
  height: 100%;
}
// .el-header {
//   line-height: 75px;
//   height: 95px !important;
// }
// .demo-form-inline {
//   display: flex;
//   flex-wrap: wrap;
// }
// .demo-form-inline .el-form-item {
//   width: 18%;
//   margin-bottom: 0px;
//   height: 55px;
// }
.el-main {
  line-height: 0px !important;
}
.concer-input {
  //查询文本框
  width: 25%;
  margin-right: 10px;
}
.el-header {
  //查询布局
  line-height: 52px;
  height: auto !important;
}
.demo-form-inline {
  //查询布局
  white-space: pre-line;
}
.demo-form-inline > div {
  //查询布局
  margin-bottom: 0px;
}
</style>

<style>
.el-dialog__header,
.dialog-footer,
.el-tree-node__label,
.el-dialog__footer,
.el-checkbox,
.custom-tree-node {
  /*对话框的行高*/
  line-height: 0px;
}
.cell {
  /*列表居中*/
  text-align: center;
}
::-webkit-scrollbar {
  /*对话框的隐藏滚动条但是可以滚动，滚动条的宽度*/
  width: 0px !important;
}
</style>
